<template>
  <div class="weekend">
    <div class="title">周末去哪儿</div>
    <ul>
      <li v-for="item of list" :key="item.id">
        <a href>
          <img :src="item.imgUrl" class="img" />
          <span class="tit">{{item.title}}</span>
          <span class="desc">{{item.desc}}</span>
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HomeWeekend',
  props: {
    list: Array
  }
}
</script>
<style lang='stylus' scoped>
@import '~styles/mixins.styl';

.weekend {
  li {
    position: relative;
    margin-bottom: 0.1rem;
    background: #fff;

    img {
      width: 100%;
    }

    span {
      display: block;
    }

    .tit {
      padding: 0.14rem 0.2rem 0 0.2rem;
      padding-right: 1.4rem;
      color: #212121;
      font-size: 0.28rem;
      line-height: 0.48rem;
      ellipsis();
    }

    .desc {
      padding: 0 0.2rem 0.2rem 0.2rem;
      color: #616161;
      font-size: 0.24rem;
      line-height: 0.42rem;
      ellipsis();
    }
  }
}
</style>
